<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>06_列表渲染_过滤与排序</title>
    </head>
    <body>
        <!--
1. 列表过滤
2. 列表排序
-->
        <div id="app">
            <input type="text" v-model="seaContent" />
            <ul>
                <li v-for="(person) in updatePersons" :key="person.id">
                    {{person.id}}--{{person.name}}--{{person.age}}
                </li>
            </ul>
            <button @click='orderType="asc"'>年龄升序</button>
            <button @click='orderType="desc"'>年龄降序</button>
            <button @click='orderType="default"'>年龄原序</button>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            new Vue({
              el:'#app',
              data:{
                seaContent:"",
                persons:[
                {id:1,name:"jack",age:42},
                {id:2,name:"rose",age:13},
                {id:3,name:"tom",age:15},
                {id:4,name:"jerky",age:12},
                {id:5,name:"tony",age:2},
                {id:6,name:"Merry",age:5},
                {id:7,name:"john",age:25},
                ],
                orderType:'default'
              },
              // methods:{
              //   asc(){
              //     this.persons.sort((a,b)=>{
              //       return a.age-b.age
              //     })
              //   },
              //   desc(){},
              //   order(){}
              // }
              // 计算并且有返回值
              computed:{
                // 只可读,设置一个函数，自己会计算然后返回出去
                updatePersons(){
                  let  {seaContent,orderType,persons} =this
                  let filterPersons=persons.filter((person)=>{
                    // 查找，name是字符串，查找字符串，找到这返回找到的下标，没有找到返回-1
                    return person.name.indexOf(seaContent) !== -1
                  })
                  // 返回这个数组
                  // return filterPersons
                  if(orderType==="default"){
                    return filterPersons
                  }
                  // sort返回改变的原数组，
                    filterPersons.sort((a,b)=>{
                    return orderType ==='asc' ? a.age-b.age :b.age-a.age
                  })
                  // 升序排序
                  return filterPersons
                }
              }

            })
        </script>
    </body>
</html>
